<template>
	<view class="content">
		<view class="stateBox">
			<image :src="baseUrl+'img/my/7.png'" class="icon"></image>
			<text class="label">已完成</text>
		</view>
		<view class="line">
		</view>
		<view class="infoBox">
			<view class="item">
				<text>订单编号：</text>
				<text>{{data.code}}</text>
			</view>
			<view class="item">
				<text>订单类型：</text>
				<text>{{data.serve_name}}</text>
			</view>
			<view class="item">
				<text>数量：</text>
				<text>{{data.num}}</text>
			</view>
			<view class="item">
				<text>下单时间：</text>
				<text>{{data.created_at}}</text>
			</view>
			<view class="item">
				<text>上门时间：</text>
				<text>{{data.service_data}}/{{data.service_time}}</text>
			</view>
			<view class="item">
				<text>服务地址：</text>
				<text>{{user.floor_house_num}}</text>
			</view>
			<view class="item">
				<text>实付款：</text>
				<text>{{data.amount}}</text>
			</view>
			<view class="item">
				<text>备注：</text>
				<text>{{data.remark || ''}}</text>
			</view>
		</view>
		<view class="line">
		</view>
		<view class="pay" @click="$navto.navto('/pages/myorder_evaluation/myorder_evaluation', {id:id})">
			立即评价
		</view>
		<view class="cancel" @click="$navto.navto('/pages/invoice/invoice', {id: id})">
			开发票
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: false,
				baseUrl: this.$baseUrl,
				id: '',
				data:'',
				user:'',
				status:''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.status = options.status;
			this.$request.get(`orderRead?id=${this.id}`).then(res => {
				this.data=res.data.data;
			})
			this.$request.get('center').then(res => {
				this.user = res.data.data;
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.pay {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		background: #121212;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 165rpx;
		margin-left: 40rpx;
	}

	.cancel {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #121212;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		margin-left: 40rpx;
		border: 1rpx solid #121212;
		box-sizing: border-box;
		/* 关键属性 */
	}

	.infoBox {
		margin-top: 95rpx;

		.item {
			padding-left: 40rpx;
			padding-right: 40rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #121212;
			letter-spacing: 5rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
			text {
				word-wrap: break-word;
				word-break: break-all;
				max-width: 500rpx;
			}
		}
	}

	.line {
		width: 670rpx;
		height: 1rpx;
		background: #010101;
		margin-top: 80rpx;
		margin-left: 40rpx;
	}

	.stateBox {
		display: flex;
		margin-top: 100rpx;
		align-items: center;

		.label {
			font-weight: 700;
			font-size: 32rpx;
			color: #121212;
			letter-spacing: 6rpx;
			margin-left: 18rpx;
		}

		.icon {
			width: 64rpx;
			height: 64rpx;
			margin-left: 278rpx;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
	}
</style>